<template>
  <div id="containerID"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'

import { Menu, Control, MiniMap, Group, DndPanel } from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'

import RegisteNode from './registerNode'

LogicFlow.use(Menu)
LogicFlow.use(Group)
LogicFlow.use(Control)
LogicFlow.use(MiniMap)
LogicFlow.use(DndPanel)

// LogicFlow 流程图编辑框架
// 1.快速搭建流程图编辑器
// 1.1 图的绘制能力 基于 SVG 来绘制形状各异的节点和线
// 1.2 各类交互能力，让图动起来。
// 1.3 提升编辑效率的能力。

// 2.基于业务场景拓展
// 2.1 设置图上所有元素的样式
// 2.2 API 拓展。支持在 LogicFlow 上注册自定义的方法，比如通过 API 拓展提供图片下载的方法
// 2.3 自定义节点、线。内置的矩形、圆形等图形类节点往往无法满足实际的业务需求，需要定义具有业务意义的节点。
// 2.4 拓展组件。
// 2.5 数据转换 adapter。
// 2.6 内置部分拓展能力。

// 流程图编辑器的设计方案
// 图渲染方案 前端绘制图形无非就是 HTML + CSS、Canvas、Svg 三种方式

onMounted(() => {
  const config = {
    stopScrollGraph: true,
    stopZoomGraph: true,
    grid: {
      size: 10,
      visible: true,
      type: 'mesh',
      config: {
        color: '#DCDCDC', // 设置网格的颜色
      },
    },
    keyboard: { enabled: true },
  }
  // 每一个流程设计界面，就是一个 LogicFlow 的实例。
  const lf = new LogicFlow({
    ...config,
    container: document.querySelector('#containerID') as HTMLElement,
    // 注册组件
    plugins: [Menu, Control, MiniMap, Group, DndPanel],
  })

  // 为菜单追加选项（必须在 lf.render() 之前设置）
  lf.extension.menu.addMenuConfig({
    nodeMenu: [
      {
        text: '分享',
        callback() {
          alert('分享成功！')
        },
      },
      {
        text: '属性',
        callback(node: any) {
          alert(`
          节点id：${node.id}
          节点类型：${node.type}
          节点坐标：(x: ${node.x}, y: ${node.y})`)
        },
      },
    ],
    edgeMenu: [
      {
        text: '属性',
        callback(edge: any) {
          alert(`
          边id：${edge.id}
          边类型：${edge.type}
          边坐标：(x: ${edge.x}, y: ${edge.y})
          源节点id：${edge.sourceNodeId}
          目标节点id：${edge.targetNodeId}`)
        },
      },
    ],
    graphMenu: [
      {
        text: '分享',
        callback() {
          alert('分享成功！')
        },
      },
    ],
  })

  // 添加导航栏
  lf.extension.control.addItem({
    iconClass: 'custom-minimap',
    title: '',
    text: '导航',
    onMouseEnter: (lf, ev) => {
      const position = lf.getPointByClient(ev.x, ev.y)
      lf.extension.miniMap.show(
        position.domOverlayPosition.x - 120,
        position.domOverlayPosition.y + 35
      )
    },
    onClick: (lf, ev) => {
      const position = lf.getPointByClient(ev.x, ev.y)
      lf.extension.miniMap.show(
        position.domOverlayPosition.x - 120,
        position.domOverlayPosition.y + 35
      )
    },
  })

  RegisteNode(lf)

  lf.extension.dndPanel.setPatternItems([
    {
      label: '选区',
      icon: '',
      callback: () => {
        lf.extension.selectionSelect.openSelectionSelect()
        lf.once('selection:selected', () => {
          lf.extension.selectionSelect.closeSelectionSelect()
        })
      },
    },
    {
      type: 'apply',
      label: 'xx阶段',
      icon: '',
      className: 'import_icon',
    },
    {
      type: 'approver',
      label: 'xx任务',
      icon: '',
    },
    {
      type: 'circle',
      label: 'xx活动',
      icon: '',
    },
  ])

  lf.render({})
})
</script>

<style scoped>
#containerID {
  width: 100vw;
  height: 100vh;
}
</style>
./components/registerNode